<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>计数器</title>
</head>
<body>
  <div id="app">
    <h1>计数器</h1>
    <button @click="count--">-</button>
    <span>{{count}}</span>
    <button @click="count++">+</button>
  </div>

<script src="../js/vue.js"></script>
<script>
 var app = new Vue({
        el: "#app",
        data: {
          count: 100,
        },
        //1.创建阶段（准备数据）
        beforeCreate() {
          console.log('创建前');
        },
        // 发送axios 初始化请求 
        created() {
          console.log('创建后');
        },

        //2.挂载阶段（挂载到页面）
        beforeMount() {
          console.log('挂载前');
        },
        mounted() {
          console.log('挂载后');
          //可以操作dom
        },
        beforeUpdate() {
          console.log('更新前');
        },
        updated() {
          console.log('更新后');
        },
        beforeDestroy() {
          console.log('销毁前');
        },
      





        methods:{
          
        },
        computed:{
          
        }
      });

</script>

</body>
</html>